import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-pro'
import GradeActionButton from './GradeActionButton'
import { ColorList } from '@/store/constant'
import { grey } from '@mui/material/colors'
interface Options {
  refresh: () => void
}

const useColumns = ({ refresh }: Options) => {
  const columns: GridColDef[] = [
    {
      field: 'grade',
      headerName: '职级',
      width: 100,
      renderCell(params: GridRenderCellParams) {
        const { row } = params
        const matchGrade = parseInt(row.grade.match(/\d+/))
        const color = get(ColorList, matchGrade, grey)
        return (
          <Avatar sx={{ bgcolor: color[50], width: 30, height: 30 }} alt="grade">
            <Typography variant="subtitle1" color={color[800]}>
              {row.grade}
            </Typography>
          </Avatar>
        )
      }
    },
    ...toPairs({
      credit_base: '基础工资',
      credit_up: '工资额度',
      performance_base: '基础绩效',
      performance_up: '绩效额度'
    }).map(([key, label]: string[]) => ({
      field: key,
      headerName: label,
      width: 200,
      type: 'text',
      renderCell(params: GridRenderCellParams) {
        const { row } = params
        return <Typography variant="body1">{row[key]}</Typography>
      }
    })),

    ...toPairs({
      next_grade: '下一职级',
      last_grade: '上一职级'
    }).map(([key, label]: string[]) => ({
      field: key,
      headerName: label,
      width: 150,
      renderCell(params: GridRenderCellParams) {
        const { row } = params
        const matchGrade = parseInt(row.grade.match(/\d+/))
        const color = get(ColorList, matchGrade, grey)
        return (
          <Avatar sx={{ bgcolor: color[50], width: 30, height: 30 }} alt="grade">
            <Typography variant="subtitle1" color={color[800]}>
              {row[key]}
            </Typography>
          </Avatar>
        )
      }
    })),
    {
      field: 'actions',
      headerName: '操作',
      width: 100,
      renderCell(params) {
        const { row } = params
        return <GradeActionButton row={row} refresh={refresh} />
      }
    }
  ]
  return columns.map((v) => ({ ...v, headerAlign: 'center', align: 'center' })) as GridColDef[]
}

export default useColumns
